﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AutoCode</title>
    <link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
        }

        .tab-content .panel-body {
            padding: 0px;
        }

        .nav-url, .nav-title, .nav-no {
            display: none;
        }

        .nav li a {
            font-weight: 500;
            padding: 10px 20px 10px 15px;
        }

        .nav-second-level li a {
            padding: 5px 5px 5px 10px;
            padding-left: 25px;
            padding-right: 20px;
        }

        .nav-third-level li a {
            padding-left: 35px;
        }

        .nav-tabs li a {
            padding: 5px 5px 5px 10px;
        }

        .fa-times-circle {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-lg-1"></div>
        <div class="col-lg-10">

            <div style="margin:10px 5px;">
                <div id="DataGrid"></div>
            </div>
            <div style="margin:10px 5px;">
                <div id="opt-msg"></div>
            </div>


            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="false">HTML</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="true">SET</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="true">GET</a></li>
                    <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="true">JSON</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div style="margin:5px;">
                            <textarea id="pre-auto-form" class="form-control" rows="40" cols="100"></textarea>
                        </div>                        
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div style="margin:5px;">
                            <textarea id="pre-auto-jsset" class="form-control" rows="40" cols="100"></textarea>
                        </div>                        
                    </div>
                    <div id="tab-3" class="tab-pane">
                        <div style="margin:5px;">
                            <textarea id="pre-auto-jsget" class="form-control" rows="40" cols="100"></textarea>
                        </div>                        
                    </div>
                    <div id="tab-4" class="tab-pane">
                        <div style="margin:5px;">
                            <textarea id="pre-auto-data" class="form-control" rows="40" cols="100"></textarea>
                        </div>                        
                    </div>

                </div>
            </div>

        </div>
    </div>



    <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/noke.grid.v1.2.js"></script>

    <script type="text/javascript">
        // ColumnCode|DataType|ColumnName|ControlType|DefaultValue
        var data = 'Name|int|名称 Age|int|年龄 StartTime|datetime|开始时间 EndTime|datetime|结束时间';

        var datagrid = {
            ConstData: {
                YesNo: [{ value: 'Yes', key: 1 }, { value: 'No', key: 0 }],
                DataType: [
                    { value: 'int', key: 'int' },
                    { value: 'nvarchar(20)', key: 'nvarchar(20)' },
                    { value: 'nvarchar(32)', key: 'nvarchar(32)' },
                    { value: 'nvarchar(64)', key: 'nvarchar(64)' },
                    { value: 'nvarchar(100)', key: 'nvarchar(100)' },
                    { value: 'nvarchar(200)', key: 'nvarchar(200)' },
                    { value: 'nvarchar(500)', key: 'nvarchar(500)' },
                    { value: 'varchar(20)', key: 'varchar(20)' },
                    { value: 'varchar(32)', key: 'varchar(32)' },
                    { value: 'varchar(64)', key: 'varchar(64)' },
                    { value: 'varchar(100)', key: 'varchar(100)' },
                    { value: 'varchar(200)', key: 'varchar(200)' },
                    { value: 'varchar(500)', key: 'varchar(500)' },
                    { value: 'bit', key: 'bit' },
                    { value: 'datetime', key: 'datetime' },
                    { value: 'decimal', key: 'decimal' },
                    { value: 'smallint', key: 'smallint' },
                    { value: 'bigint', key: 'bigint' },
                ]
            },
            args: null,
            init: function () {
                datagrid.args = datagrid.setting();
            },
            setting: function () {
                var setting = { id: "DataGrid", key: "SysNo", title: {}, cols: [], toolbar: {}, rowindex: true, data: [], supportdata: {}, editable: true };
                setting.cols.push({ key: "Code", type: "string", width: 100, label: "Code", edittype: 'text' });
                setting.cols.push({ key: "DataType", type: "string", width: 80, label: "Data Type", edittype: 'ddbox' });
                setting.cols.push({ key: "Name", type: "string", width: 80, label: "Name", edittype: 'text' });
                setting.cols.push({ key: "IsNull", type: "int", width: 100, label: "Is Null", edittype: 'ddbox' });
                setting.cols.push({ key: "Remark", type: "string", width: 300, label: "Remark", edittype: 'text' });
                setting.cols.push({ key: "OrderNumber", type: "int", width: 80, label: "Sort", edittype: 'text' });
                setting.cols.push({ key: "DefaultValue", type: "string", width: 120, label: "Default Value", edittype: 'text' });
                setting.cols.push({ key: 'Operate', type: 'string', width: 60, label: '' });
                setting.supportdata = { IsNull: datagrid.ConstData.YesNo, DataType: datagrid.ConstData.DataType };
                setting.rowbind = datagrid.rowbind;
                setting.save = datagrid.save;
                return setting;
            },
            rowbind: function (i, model, args) {
                model['DataType-value'] = model.DataType;
                model['IsNull-value'] = model.IsNull ? 'Yes' : 'No';
                model['Operate'] = '<a href="javascript:datagrid.del(' + item.SysNo + ');return false;">删除</a>';
            },
            add: function () {
                var item = { SysNo: A0J1A2XT() };
                item.Code = 'Code';
                item.DataType = 'int';
                item.Name = 'Name';
                item.IsNull = 1;
                item.Remark = '';
                item.DefaultValue = '';
                item.OrderNumber = datagrid.args.data.length + 1;

                this.args.data.push(item);
                this.bind();
            },
            del: function () {
                if (!confirm('确认要删除此项吗？'))
                    return false;
                var data = [];
                $(this.args.data).each(function (i, item) {
                    if (item.SysNo != sysNo) {
                        data.push(item);
                    }
                });
                this.args.data = data;
                this.bind();
            },
            save: function (model, args) {
                if ($.trim(model.Code) == '') {
                    ShowMessage('Code is null.')
                    return false;
                }
                if ($.trim(model.Name) == '') {
                    ShowMessage('Name is null.')
                    return false;
                }

                $(this.args.data).each(function (i, item) {
                    if (parseInt(item.SysNo) === parseInt(model.SysNo)) {
                        item.Code = model.Code;
                        item.DataType = model.DataType;
                        item.Name = model.Name;
                        item.IsNull = model.IsNull;
                        item.Remark = model.Remark;
                        item.OrderNumber = model.OrderNumber;
                        item.DefaultValue = model.DefaultValue;
                    }
                });
                fform.autoCode(this.args.data);
            },
            bind: function () {
                this.args.total = this.args.data.length;
                $('#' + this.args.id).grid(this.args);
                fform.autoCode(this.args.data);
            }
        }

        var fform = {
            init: function () {

            },
            autoCode: function (data) {
                ShowMessage('Auto Code.');
            }
        }

        $(function () {
            fform.init();
            datagrid.init();
        })

        // 显示消息
        function ShowMessage(msg) {
            $('#opt-msg').html(msg);
            setTimeout(" $('#opt-msg').html('');", 20000);
        }

        function A0J1A2XT() {
            return (new Date()).getMilliseconds();
        }
    </script>
</body>
</html>
